<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>团队介绍 - 智慧图书管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            warning: '#FFAA33',
            danger: '#FF5252',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .hover-scale {
        transition: transform 0.3s ease;
      }
      .hover-scale:hover {
        transform: scale(1.02);
      }
      .nav-active {
        @apply text-primary border-b-2 border-primary;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-6">
    <div class="flex flex-col md:flex-row gap-6">
      <!-- 左侧边栏 -->
      <aside class="w-full md:w-64 shrink-0">
        <div class="bg-white rounded-xl p-5 card-shadow hover-scale">
          <div class="flex flex-col items-center">
            <img src="/image/D03.jpg" alt="团队Logo" class="w-24 h-24 rounded-full object-cover border-4 border-primary/20 mb-4">
            <h2 class="text-xl font-bold">图书后台管理团队</h2>
            <p class="text-gray-500 text-sm">前后端学员</p>
            <div class="mt-4">
              
            </div>
          </div>
          
          <div class="mt-6 pt-6 border-t border-gray-100">
            <div class="grid grid-cols-3 gap-2 text-center">
              <div>
                <p class="text-2xl font-bold text-primary">12</p>
                <p class="text-gray-500 text-xs">团队成员</p>
              </div>
              <div>
                <p class="text-2xl font-bold text-warning">5</p>
                <p class="text-gray-500 text-xs">产品版本</p>
              </div>
              <div>
                <p class="text-2xl font-bold text-secondary">500+</p>
                <p class="text-gray-500 text-xs">合作图书馆</p>
              </div>
            </div>
          </div>
        </div>
        
        <div class="mt-6 bg-white rounded-xl p-5 card-shadow">
          <h3 class="font-bold mb-4 flex items-center">
            <i class="fa fa-list-ul text-primary mr-2"></i>
            团队导航
          </h3>
          <ul class="space-y-2">
            <li>
              <a href="#" class="flex items-center px-3 py-2 rounded-lg bg-primary/10 text-primary">
                <i class="fa fa-users w-5 text-center mr-3"></i>
                <span>团队介绍</span>
              </a>
            </li>
            <!-- <li>
               <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
                <i class="fa fa-sitemap w-5 text-center mr-3"></i>
                <span>组织结构</span>
              </a> 
            </li> -->
            <!-- <li>
              <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
                <i class="fa fa-briefcase w-5 text-center mr-3"></i>
                <span>核心业务</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
                <i class="fa fa-comments-o w-5 text-center mr-3"></i>
                <span>客户评价</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center px-3 py-2 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
                <i class="fa fa-envelope-o w-5 text-center mr-3"></i>
                <span>加入我们</span>
              </a>
            </li>
          </ul> -->
        </div>
      </aside>
      
      <!-- 右侧内容 -->
      <div class="flex-grow">
        <!-- 团队介绍 -->
        <div class="bg-white rounded-xl p-6 card-shadow hover-scale">
          <h2 class="text-xl font-bold mb-6 flex items-center">
            <i class="fa fa-users text-primary mr-2"></i>
            团队介绍
          </h2>
          
          <div class="prose max-w-none">
            <p class="text-lg">智慧图书管理系统团队由一群热爱技术和图书馆事业的专业人士组成，致力于为各类图书馆提供高效、智能的管理解决方案。</p>
            
            <p class="mt-4">我们拥有一支经验丰富、技术精湛的团队，涵盖产品设计、软件开发、系统集成、技术支持等多个领域。团队成员平均拥有5年以上图书馆管理系统开发经验，对图书馆业务流程有深入理解。</p>
            
            <p class="mt-4">该项目不只是作业而是更好的挑战自己，不断对知识的探索，不断提升自我代码完善和代码优化水平！！！</p>
            
            <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
              <div class="text-center">
                <div class="text-3xl font-bold text-primary">1年+</div>
                <div class="text-gray-500 text-sm">行业经验</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-primary">6</div>
                <div class="text-gray-500 text-sm">专业成员</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-primary">10+</div>
                <div class="text-gray-500 text-sm">合作客户</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-primary">80%</div>
                <div class="text-gray-500 text-sm">客户满意度</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 团队成员 -->
        <div class="mt-6 bg-white rounded-xl p-6 card-shadow hover-scale">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold flex items-center">
              <i class="fa fa-user-o text-primary mr-2"></i>
              团队成员
            </h2>
          </div>
          
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            
            <div class="bg-white rounded-xl overflow-hidden card-shadow hover-scale">
              <img src="/image/1.jpg" alt="资源查找" class="w-full h-48 object-cover">
              <div class="p-5">
                <h3 class="text-lg font-bold">队员</h3>
                <p class="text-primary font-medium mb-2">队员</p>
                <p class="text-gray-600 text-sm">负责团队的PPT和网页资源的查找</p>
                <div class="mt-4 flex space-x-3">
                  <!-- <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-envelope-o"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-linkedin"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-github"></i>
                  </a> -->
                </div>
              </div>
            </div>
            
            <!-- 技术总监 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow hover-scale">
              <img src="/image/2.png" alt="页面美化" class="w-full h-48 object-cover">
              <div class="p-5">
                <h3 class="text-lg font-bold">队员</h3>
                <p class="text-primary font-medium mb-2">队员</p>
                <p class="text-gray-600 text-sm">负责数据可视化技术，美化数据库</p>
                <div class="mt-4 flex space-x-3">
                  <!-- <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-envelope-o"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-linkedin"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-github"></i>
                  </a> -->
                </div>
              </div>
            </div>
            
            <!-- UI/UX设计师 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow hover-scale">
              <img src="/image/3.png" alt="文案撰写" class="w-full h-48 object-cover">
              <div class="p-5">
                <h3 class="text-lg font-bold">队员</h3>
                <p class="text-primary font-medium mb-2">队员</p>
                <p class="text-gray-600 text-sm">参与学习和思考，请教代码编写和PPT文案制作</p>
                <div class="mt-4 flex space-x-3">
                  <!-- <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-envelope-o"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-dribbble"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-behance"></i>
                  </a> -->
                </div>
              </div>
            </div>
            
            <!-- 项目经理 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow hover-scale">
              <img src="/image/4.png" alt="PPT撰写" class="w-full h-48 object-cover">
              <div class="p-5">
                <h3 class="text-lg font-bold">队员</h3>
                <p class="text-primary font-medium mb-2">队员</p>
                <p class="text-gray-600 text-sm">负责编写反爬机制，撰写PPT，网页编辑</p>
                <div class="mt-4 flex space-x-3">
                  <!-- <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-envelope-o"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-linkedin"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-twitter"></i>
                  </a> -->
                </div>
              </div>
            </div>
            
            <!-- 技术支持主管 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow hover-scale">
              <img src="/image/5.png" alt="技术指导" class="w-full h-48 object-cover">
              <div class="p-5">
                <h3 class="text-lg font-bold">场外援助</h3>
                <p class="text-primary font-medium mb-2">提供技术支持</p>
                <p class="text-gray-600 text-sm">服务器系统技术专家，奇安信网络安全专家，提供密码哈希值撰写功能，设置xss和sql注入功能</p>
                <div class="mt-4 flex space-x-3">
                  <!-- <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-envelope-o"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-linkedin"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-weixin"></i>
                  </a> -->
                </div>
              </div>
            </div>
            
            <!-- 数据分析师 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow hover-scale">
              <img src="/image/bg.jpg" alt="技术指导" class="w-full h-48 object-cover">
              <div class="p-5">
                <h3 class="text-lg font-bold">场外援助</h3>
                <p class="text-primary font-medium mb-2">数据分析师</p>
                <p class="text-gray-600 text-sm">数据分析师，闽候天气气象中心数据分析工程师，数据挖掘与分析，提供API接口。</p>
                <div class="mt-4 flex space-x-3">
                  <!-- <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-envelope-o"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-linkedin"></i>
                  </a>
                  <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-github"></i>
                  </a> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 联系我们 -->
        <div class="mt-6 bg-white rounded-xl p-6 card-shadow hover-scale">
          <h2 class="text-xl font-bold mb-6 flex items-center">
            <i class="fa fa-envelope-o text-primary mr-2"></i>
            联系我们
          </h2>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <p class="text-gray-700">该页面属于测试页面，后续将开源gitee/github，需要的可以联系</p>
              
              <div class="mt-4 space-y-3">
                <div class="flex items-start">
                  <i class="fa fa-map-marker text-primary mt-1 w-5 text-center"></i>
                  <span>泉州工程职业技术学院</span>
                </div>
                <div class="flex items-center">
                  <i class="fa fa-envelope-o text-primary w-5 text-center"></i>
                  <span>API接口来自：https://www.jsdelivr.com/</span>
                </div>
              </div>
              
              <div class="mt-6 flex space-x-4">
                <a href="#" class="bg-primary/10 hover:bg-primary/20 text-primary p-3 rounded-full transition-colors">
                  <i class="fa fa-weixin"></i>
                </a>
                <a href="#" class="bg-primary/10 hover:bg-primary/20 text-primary p-3 rounded-full transition-colors">
                  <i class="fa fa-weibo"></i>
                </a>
                <a href="#" class="bg-primary/10 hover:bg-primary/20 text-primary p-3 rounded-full transition-colors">
                  <i class="fa fa-linkedin"></i>
                </a>
                <a href="#" class="bg-primary/10 hover:bg-primary/20 text-primary p-3 rounded-full transition-colors">
                  <i class="fa fa-github"></i>
                </a>
              </div>
            </div>
            
            <div>
              <form>
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                  <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入您的姓名">
                </div>
                
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                  <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入您的邮箱">
                </div>
                
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                  <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                    <option>产品咨询</option>
                    <option>技术支持</option>
                    <option>合作洽谈</option>
                    <option>其他问题</option>
                  </select>
                </div>
                
                <div class="mb-4">
                  <label class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
                  <textarea rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入您的留言内容"></textarea>
                </div>
                
                <button type="submit" class="w-full bg-primary text-white px-4 py-2 rounded-lg font-medium hover:bg-primary/90 transition-colors">
                  发送消息
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-10 mt-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <i class="fa fa-book text-primary text-2xl"></i>
            <h2 class="text-xl font-bold">图书后台管理系统</h2>
          </div>
          <p class="text-gray-400 text-sm">
            提供便捷的图书借阅服务，丰富你的阅读体验。
          </p>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa fa-weixin text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa fa-qq text-xl"></i>
            </a>
          </div>
        </div>
        <div>
          <h3 class="text-lg font-medium mb-4">联系我们</h3>
          <ul class="space-y-2 text-gray-400">
            <li class="flex items-center">
              <i class="fa fa-map-marker w-5 text-center mr-2"></i>
              <span>福清市高山南翁村</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-phone w-5 text-center mr-2"></i>
              <span>15880182260</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-envelope-o w-5 text-center mr-2"></i>
              <span>contact@library.com</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500 text-sm">
        <p> @2025-05.22 由唯出品/gitee/github/4230603094</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 表单提交处理
    document.querySelectorAll('form').forEach(form => {
      form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 这里应该是AJAX请求，将数据发送到后端
        // 这里用setTimeout模拟网络请求
        showNotification('提交成功！我们将尽快与您联系。', 'success');
      });
    });
    
    // 通知提示框函数
    function showNotification(message, type = 'info') {
      // 创建通知元素
      const notification = document.createElement('div');
      notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out translate-x-full z-50 flex items-center`;
      
      // 根据类型设置样式
      if (type === 'success') {
        notification.classList.add('bg-secondary', 'text-white');
        notification.innerHTML = `<i class="fa fa-check-circle mr-2"></i>${message}`;
      } else if (type === 'error') {
        notification.classList.add('bg-danger', 'text-white');
        notification.innerHTML = `<i class="fa fa-exclamation-circle mr-2"></i>${message}`;
      } else if (type === 'warning') {
        notification.classList.add('bg-warning', 'text-white');
        notification.innerHTML = `<i class="fa fa-exclamation-triangle mr-2"></i>${message}`;
      } else {
        notification.classList.add('bg-primary', 'text-white');
        notification.innerHTML = `<i class="fa fa-info-circle mr-2"></i>${message}`;
      }
      
      // 添加到页面
      document.body.appendChild(notification);
      
      // 显示通知
      setTimeout(() => {
        notification.classList.remove('translate-x-full');
      }, 100);
      
      // 自动关闭
      setTimeout(() => {
        notification.classList.add('translate-x-full');
        setTimeout(() => {
          document.body.removeChild(notification);
        }, 300);
      }, 3000);
    }
  </script>
</body>
</html>
    